<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>肿瘤预测分析</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            margin: 0;
            padding: 2rem;
            background-color: #f4f7f6;
            color: #333;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        .container {
            background-color: white;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 600px;
        }
        h1 {
            text-align: center;
            color: #0056b3;
            margin-bottom: 1.5rem;
        }
        form {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }
        .form-group {
            display: flex;
            flex-direction: column;
        }
        label {
            margin-bottom: 0.5rem;
            font-weight: bold;
        }
        input {
            padding: 0.5rem;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 1rem;
        }
        button {
            grid-column: 1 / -1;
            padding: 0.75rem;
            border: none;
            border-radius: 4px;
            background-color: #007bff;
            color: white;
            font-size: 1.1rem;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        button:hover {
            background-color: #0056b3;
        }
        #result-container {
            margin-top: 2rem;
            padding: 1.5rem;
            border-radius: 8px;
            background-color: #f8f9fa;
            display: none;
            border-left: 4px solid #007bff;
        }
        #result-container h3 {
            margin-top: 0;
            color: #333;
            border-bottom: 1px solid #e9ecef;
            padding-bottom: 0.5rem;
            margin-bottom: 1rem;
        }
        .result-item {
            margin-bottom: 0.8rem;
            padding: 0.5rem;
            border-radius: 4px;
            background-color: white;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        .loader {
            border: 4px solid #f3f3f3;
            border-radius: 50%;
            border-top: 4px solid #3498db;
            width: 20px;
            height: 20px;
            animation: spin 2s linear infinite;
            display: none;
            margin: 1rem auto 0;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .error-message {
            color: #dc3545;
            background-color: #f8d7da;
            border: 1px solid #f5c6cb;
            padding: 0.75rem;
            border-radius: 4px;
            margin-top: 1rem;
        }
        .confidence-meter {
            height: 20px;
            background: #e9ecef;
            border-radius: 10px;
            margin: 10px 0;
            overflow: hidden;
        }
        .confidence-fill {
            height: 100%;
            border-radius: 10px;
            transition: width 0.5s ease;
        }
        .malignant-fill { background: linear-gradient(90deg, #dc3545, #c82333); }
        .benign-fill { background: linear-gradient(90deg, #28a745, #20c997); }
        .unrealistic-fill { background: linear-gradient(90deg, #ffc107, #fd7e14); }
        .uncertain-fill { background: linear-gradient(90deg, #6c757d, #5a6268); }
    </style>
</head>
<body>
    <div class="container">
        <h1>肿瘤预测分析</h1>
        <form id="prediction-form">
            <div class="form-group">
                <label for="radius_mean">半径均值 (radius_mean)</label>
                <input type="number" step="any" id="radius_mean" name="radius_mean" required>
            </div>
            <div class="form-group">
                <label for="texture_mean">纹理均值 (texture_mean)</label>
                <input type="number" step="any" id="texture_mean" name="texture_mean" required>
            </div>
            <div class="form-group">
                <label for="perimeter_mean">周长均值 (perimeter_mean)</label>
                <input type="number" step="any" id="perimeter_mean" name="perimeter_mean" required>
            </div>
            <div class="form-group">
                <label for="area_mean">面积均值 (area_mean)</label>
                <input type="number" step="any" id="area_mean" name="area_mean" required>
            </div>
            <div class="form-group">
                <label for="smoothness_mean">平滑度均值 (smoothness_mean)</label>
                <input type="number" step="any" id="smoothness_mean" name="smoothness_mean" required>
            </div>
            <div class="form-group">
                <label for="compactness_mean">紧凑度均值 (compactness_mean)</label>
                <input type="number" step="any" id="compactness_mean" name="compactness_mean" required>
            </div>
            <div class="form-group">
                <label for="concavity_mean">凹度均值 (concavity_mean)</label>
                <input type="number" step="any" id="concavity_mean" name="concavity_mean" required>
            </div>
            <div class="form-group">
                <label for="concave_points_mean">凹点均值 (concave_points_mean)</label>
                <input type="number" step="any" id="concave_points_mean" name="concave_points_mean" required>
            </div>
            <div class="form-group">
                <label for="symmetry_mean">对称性均值 (symmetry_mean)</label>
                <input type="number" step="any" id="symmetry_mean" name="symmetry_mean" required>
            </div>
            <div class="form-group">
                <label for="fractal_dimension_mean">分形维数均值 (fractal_dimension_mean)</label>
                <input type="number" step="any" id="fractal_dimension_mean" name="fractal_dimension_mean" required>
            </div>
            <div class="form-group">
                <label for="radius_se">半径标准误差 (radius_se)</label>
                <input type="number" step="any" id="radius_se" name="radius_se" required>
            </div>
            <div class="form-group">
                <label for="texture_se">纹理标准误差 (texture_se)</label>
                <input type="number" step="any" id="texture_se" name="texture_se" required>
            </div>
            <button type="submit">分析</button>
        </form>
        <div class="loader" id="loader"></div>
        <div id="result-container">
            <h3>分析结果</h3>
            <div class="result-item">
                <strong>判断结果:</strong> <span id="judgment_result"></span>
            </div>
            <div class="result-item">
                <strong>分析说明:</strong> <span id="treatment_advice"></span>
            </div>
            <div class="result-item">
                <strong>置信度:</strong> 
                <div class="confidence-meter">
                    <div id="confidence_fill" class="confidence-fill" style="width: 0%"></div>
                </div>
                <span id="confidence_value"></span>%
            </div>
        </div>
        <div id="error-container" class="error-message" style="display: none;"></div>
    </div>

    <script>
        document.getElementById('prediction-form').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const form = e.target;
            const formData = new FormData(form);
            const data = Object.fromEntries(formData.entries());

            const resultContainer = document.getElementById('result-container');
            const errorContainer = document.getElementById('error-container');
            const judgmentResultElement = document.getElementById('judgment_result');
            const treatmentAdviceElement = document.getElementById('treatment_advice');
            const confidenceValueElement = document.getElementById('confidence_value');
            const confidenceFillElement = document.getElementById('confidence_fill');
            const loader = document.getElementById('loader');
            const submitButton = form.querySelector('button');

            // 重置显示
            resultContainer.style.display = 'none';
            errorContainer.style.display = 'none';
            loader.style.display = 'block';
            submitButton.disabled = true;

            try {
                const response = await fetch('/predict', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(data)
                });

                const result = await response.json();

                if (!response.ok) {
                    throw new Error(result.error || '服务器发生错误');
                }

                // 更新结果显示
                judgmentResultElement.textContent = result.judgment_result;
                treatmentAdviceElement.textContent = result.treatment_advice;
                confidenceValueElement.textContent = result.confidence;
                
                // 设置置信度进度条
                confidenceFillElement.style.width = `${result.confidence}%`;
                
                // 根据结果设置颜色
                let fillClass = 'uncertain-fill';
                if (result.judgment_result.includes('恶性')) {
                    judgmentResultElement.style.color = '#dc3545';
                    resultContainer.style.borderLeftColor = '#dc3545';
                    fillClass = 'malignant-fill';
                } else if (result.judgment_result.includes('良性')) {
                    judgmentResultElement.style.color = '#28a745';
                    resultContainer.style.borderLeftColor = '#28a745';
                    fillClass = 'benign-fill';
                } else if (result.judgment_result.includes('不符合现实')) {
                    judgmentResultElement.style.color = '#ffc107';
                    resultContainer.style.borderLeftColor = '#ffc107';
                    fillClass = 'unrealistic-fill';
                } else {
                    judgmentResultElement.style.color = '#6c757d';
                    resultContainer.style.borderLeftColor = '#6c757d';
                    fillClass = 'uncertain-fill';
                }
                
                // 更新进度条颜色
                confidenceFillElement.className = `confidence-fill ${fillClass}`;
                
                resultContainer.style.display = 'block';

            } catch (error) {
                errorContainer.textContent = '错误: ' + error.message;
                errorContainer.style.display = 'block';
            } finally {
                loader.style.display = 'none';
                submitButton.disabled = false;
            }
        });
    </script>
</body>
</html>